<template>
  <div class="weekend-duty">
    <div class="main_title">
      <el-tabs v-model="firstType" @tab-click="handleClick">
        <el-tab-pane :name="item.id" v-for="item in boardTabsData" :key="item.id">
          <span slot="label">{{ item.name }}</span>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="main_con" v-if="pageShow">
      <dutyList v-if="['0', '1', '2', '4'].includes(firstType)" :firstType="firstType"></dutyList>
      <dutyBankCard v-else-if="firstType === '5'"></dutyBankCard>
      <dutyStatistics v-else :firstType="firstType"></dutyStatistics>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import dutyList from './components/dutyList'
import dutyStatistics from './components/dutyStatistics'
import dutyBankCard from './components/dutyBankCard.vue'
export default {
  name: 'weekendDuty',
  components: {
    dutyList,
    dutyStatistics,
    dutyBankCard,
  },
  props: {},
  data() {
    return {
      boardTabsData: [],
      firstType: '0',
      pageShow: false,
    }
  },
  watch: {},
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isOrgRole', 'isPartRole', 'isWeekendRole']),
  },
  created() {},
  mounted() {
    if (this.isOrgRole) {
      this.boardTabsData.push({ name: '预值班表', id: '0' }, { name: '值班确认', id: '1' })
    }
    if (this.isWeekendRole) {
      this.boardTabsData.push(
        { name: '部门汇总', id: '4' },
        { name: '误餐补助', id: '2' },
        { name: '补助汇总', id: '3' },
        { name: '卡号管理', id: '5' }
      )
      this.firstType = '4'
    }
    if (this.$route.query.firstType) {
      this.firstType = this.$route.query.firstType
    }
    this.pageShow = true
  },
  methods: {
    handleClick(item) {},
  },
}
</script>
<style lang="scss" scoped>
.weekend-duty {
  height: 100%;
  width: 100%;
  .main_title {
    height: 42px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding: 0 20px;
    /deep/.el-tabs__header {
      margin: 0 0 5px;
      .el-tabs__nav-wrap::after {
        height: 1px;
      }
    }
  }
  .main_con {
    height: calc(100% - 20px);
  }
}
</style>
